import React from 'react'
import PropTypes from 'prop-types';
import Item from './Item'
import Blank from './Blank'

function List(props) {
    const { list, dispatch } = props;
    let listContent = list.length ? <ul>{list.map(item => <Item
        key={item.id}
        detail={item}
        dispatch={dispatch}
    />)}</ul> : <Blank />;
    return (
        <div className='list-wrapper'>
            {listContent}
        </div>
    )
}

List.propTypes = {
    list: PropTypes.array.isRequired,
    dispatch: PropTypes.func.isRequired
}

export default List
